<template>
  <div id="receipt">
    <Headers :title="$t('asset.assetsDetail.collection')"/>
    <div class="receipt-label">
      <div class="maney-types">
        <img src="../../assets/ETH_icon.png" alt>
        <span>ETH</span>
      </div>
      <div class="wallet-adderss">
        <span>{{$t("receipt.walletAdderss")}}</span>
        <span class="walletNum">{{walletNum}}</span>
      </div>
      <div class="address">{{address}}</div>
    </div>
    <!-- qrcode -->
    <div class="qrcode" ref="qrcode"></div>
    <!-- qrcode下面的文字 -->
    <div
      class="clickqrcode-text"
      v-clipboard:copy="address"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
    >{{$t("receipt.clickQrcodeText")}}</div>
    <div class="click-copy">
      <p>{{code}}</p>
      <p
        v-clipboard:copy="code"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError"
      >{{$t("receipt.clickCopy")}}</p>
    </div>
    <input type="text" style="width:5px;height:5px;opacity:0">
  </div>
</template>

<script>
import { qrcode } from "utils/js/qrcode";
import { constants } from "crypto";
export default {
  name: "receipt",
  data() {
    return {
      walletNum: 15054152005,
      address: "0xf69a56e59b8c9240705d7c388ab8d982b4a215ee",
      code: "oil7511"
    };
  },
  methods: {
    onCopy() {
      alert("复制成功！！！");
    },
    onError() {
      alert("复制失败！！！");
    }
  },
  mounted() {
    // 调用封装的qrcode插件
    qrcode(this.$refs.qrcode, this.address, 159, 159);
  }
};
</script>

<style lang="stylus" scoped>
@import '../../utils/styl/mixin.styl'
#receipt
  width 100%
  positCenter(0, 0, 0, 0, 0, 0)
  bgImg('../../assets/receiptBg.png', cover)
  .receipt-label
    box-sizing border-box
    padding rem(30) rem(50)
    margin-top rem(110)
    width 100%
    height rem(162)
    text-align left
    bgImg('../../assets/receipt_label.png', contain)
    .maney-types
      margin-bottom rem(14)
      img
        width rem(30)
        height rem(34)
        object-fit contain
        vertical-align middle
      span
        font-size rem(20)
        line-height rem(27)
        color $fontColor
        vertical-align middle
        margin-left rem(13)
        font-weight bold
    .wallet-adderss
      margin-bottom rem(7)
      span
        font-size rem(15)
        color $addressColor
        vertical-align middle
      .walletNum
        font-size rem(25)
        line-height rem(34)
        color $fontColor
    .address
      font-size rem(12)
      line-height rem(16)
      color $fontColor
      font-weight bold
  .qrcode
    width rem(203)
    height rem(203)
    border-radius rem(20)
    border rem(1) solid $tabBarColor
    margin rem(22) auto 0
    box-sizing border-box
    padding rem(22)
  .clickqrcode-text
    margin-top rem(21)
    color $fontColor
    font-size rem(15)
  .click-copy
    margin-top rem(14)
    color $fontColor
    p
      line-height rem(24)
      font-size rem(18)
    p:nth-of-type(2)
      font-size rem(15)
</style>
